<!--设备异常占比>-->
<template>
  <div class="com-container">
    <div class="com-chart" ref="shebei"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      chartInstance: null,
      allData: null, //服务器返回的数据
    };
  },
  props: {
    fenqu: String,
  },
  mounted() {
    this.initChart();
    this.getData();
    window.addEventListener("resize", this.screenAdapter);
    this.screenAdapter();
  },
  destroyed() {
    window.removeEventListener("resize", this.screenAdapter);
  },
  methods: {
    initChart() {
      this.chartInstance = this.$echarts.init(this.$refs.shebei, "chalk");
      const initOption = {
        title: {
          text: "▎ 异常占比",
          left: 20,
          top: 10,
        },
        backgroundColor: "", //设置无背景色
        color: [
          "#006cff",
          "#60cda0",
          "#ed8884",
          "#ff9f7f",
          "#0096ff",
          "#9fe6b8",
          "#32c5e9",
          "#1d9dff",
        ],
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          top: "bottom",
          itemWidth: 10,
          itemHeight: 10,
          textStyle: {
            color: "rgba(255,255,255,.5)",
            fontSize: "12",
          },
        },
        series: [
          {
            name: "异常占比",
            type: "pie",
            radius: ["10%", "70%"],
            center: ["50%", "50%"],
            roseType: "area",
            // 图形的文字标签
            label: {
              fontSize: 10,
            },
            // 链接图形和文字的线条
            labelLine: {
              // length 链接图形的线条
              length: 6,
              // length2 链接文字的线条
              length2: 8,
            },
          },
        ],
      };
      this.chartInstance.setOption(initOption);
    },
    async getData() {
      const res = await this.$http.get("/equipment/fault_zhanbi", {
        params: {
          area: this.fenqu,
        },
      });
      this.allData = res.data;
      // console.log(this.allData);
      this.updateChart();
    },
    updateChart() {
      const data = this.allData.map((item) => ({
        value: item.number,
        name: item.type,
      }));
      // console.log(data);
      const dataOption = {
        series: [
          {
            data: data,
          },
        ],
      };
      this.chartInstance.setOption(dataOption);
    },
    //饼图的适配
    screenAdapter() {
      const width = this.$refs.shebei.offsetWidth;
      const height = this.$refs.shebei.offsetHeight;
      const chart = this.chartInstance;
      chart.resize({
        width,
        height,
      });
      const titleFontSize = (this.$refs.shebei.offsetWidth / 100) * 3.6;
      const adapterOption = {
        title: {
          textStyle: {
            fontSize: titleFontSize * 1.5,
          },
        },
      };
      this.chartInstance.setOption(adapterOption);
      this.chartInstance.resize();
    },
  },
};
</script>

<style>
</style>